<template>
  <div class="app-container">
    <div id="faultLocationTwo" style="width: 100%; height: 500px " />
  </div>

</template>

<script>
import { getFaultTwo } from '@/api/pie'

export default {
  name: 'FaultTwo',
  props: {
    // eslint-disable-next-line vue/require-prop-type-constructor
    faultLocationOne: ''
  },
  data() {
    return {
      myChart: '',
      dialogVisible: false
    }
  },
  mounted() {
    this.initData()
    this.drawCharts()
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      this.myChart = this.$echarts.init(document.getElementById('faultLocationTwo'))
      // 指定图表的配置项和数据
      this.myChart.setOption({
        title: {
          text: '故障二级位置总览表',
          left: 'center'
        },
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '位置 : {b} <br/>次数 : {c}次 ({d}%)'
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [25, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            label: {
              show: false
            },
            itemStyle: {
              borderRadius: 5
            },
            data: []
          }
        ]
      })
    },
    initData() {
      const faultLocationOne = this.faultLocationOne
      getFaultTwo(faultLocationOne).then(({ data }) => {
        this.myChart.setOption({
          series: [{
            data: data.list
          }]
        })
      })
    },
    drawCharts() {
      this.drawChart()
    }
  }
}

</script>

<style scoped>

</style>
